<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
			});
		</script>
	</head>

	<body>
		<header>
			<h2>欢迎使用天气预报</h2>
			<button type="submit" class="nav-change show" onclick="change()" id="choice">城市</button>
		</header>
		<div class="container">
			<div class="main">
				<div id="today">
					<div>
						<span class="pull-left about-temp">30℃~37℃</span>
						<span onclick="" class="pull-right refesh">
							<img src="img/refesh.png"/>
						</span>
					</div>
					<div class="week">
						<img src="img/晴.png" class="week-img" />
						<p>晴</p>
					</div>
					<div>
						<span class="pull-left temp">31℃</span>
						<span class="pull-right">
							<span class="pull-right">星期三</span>
							<br/>
							<span class="pull-right">测试地址</span>
						</span>
					</div>
				</div>
				<div id="future">
					<div>
						<p>星期四</p>
						<img src="blackImg/晴.png" class="future-img background-default" />
						<p>晴</p>
						<p>30℃~37℃ </p>
					</div>
					<div>
						<p>星期五</p>
						<img src="blackImg/大雨.png" class="future-img background-default" />
						<p>晴</p>
						<p>30℃~38℃</p>
					</div>
					<div>
						<p>星期六</p>
						<img src="blackImg/雨夹雪.png" class="future-img background-default" />
						<p>晴</p>
						<p>30℃~38℃</p>
					</div>
				</div>
			</div>
		</div>

		<div class="city-manage">
			<div class="search">
				<input type="text" placeholder="请输入正确的城市" class="search-input" id="input" />
				<button type="submit" class="search-btn" onclick="add()">添加</button>
			</div>
			<div class="city-hot">
				<p>热门城市:</p>
				<ul>
					<li>北京</li>
					<li>上海</li>
					<li>广州</li>
					<li>深圳</li>
				</ul>
				<ul>
					<li>天津</li>
					<li>杭州</li>
					<li>东莞</li>
					<li>宁波</li>
				</ul>
				<ul>
					<li>西安</li>
					<li>成都</li>
					<li>重庆</li>
					<li>南京</li>
				</ul>
				<ul>
					<li>苏州</li>
					<li>武汉</li>
					<li>厦门</li>
					<li>福州</li>
				</ul>
				<ul>
					<li>昆明</li>
					<li>沈阳</li>
					<li>长春</li>
					<li>大连</li>
				</ul>
				<ul>
					<li>济南</li>
					<li>青岛</li>
					<li>郑州</li>
					<li>兰州</li>
				</ul>
				<ul>
					<li>太原</li>
					<li>合肥</li>
					<li>南昌</li>
					<li>长沙</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4evvyH05YAcNBB1luzq7lr9GaMKCAGEt"></script>
		<script type="text/javascript">
			let city = '';
			$(document).ready(function() {
				new BMap.LocalCity().get(function(BaiDuCity) {
					//定位城市
					//因为最后有一个市，两个API不匹配，这里获取城市返回自贡市，获取天气则是需要自贡，所以要字符串删除
					BaiDuCity.name = BaiDuCity.name + "";
					city = BaiDuCity.name.substring(0, BaiDuCity.name.length - 1);
					let weather_city = localStorage.getItem('weather_city');
					if(weather_city != null){
						getWeather();
					}else{
						localStorage.setItem('weather_city', city);
						getWeather();
					}
				});
			});

			function getWeather(){
				//获取天气
				//$citycode = urlencode(city);
				//请求接口格式cityname=%E5%8C%97%E4%BA%AC&dtype=json&format=1&key=f6e0cad336b95a0b70d42634359fb74b
				city = localStorage.getItem('weather_city');
				console.log(city)
				url = 'http://v.juhe.cn/weather/index?format=2&dtype=json&cityname=' + city + '&key=f6e0cad336b95a0b70d42634359fb74b';
				$.ajax({
					url: url,
					dataType: "jsonp",
					type: "get",
					data: {
						location: city
					},
					success: function(data) {
						$('#future').empty(); 
						console.log(data)
						var sk = data.result.sk;
						var today = data.result.today;
						var futur = data.result.future;
						$('#today').html('<div id="today"><div><span class="pull-left about-temp">' + today.temperature +
							'</span><span onclick="getWeather()" class="pull-right refesh"><img src="img/refesh.png"/>' +
							'</span></div><div class="week"><img src="img/'+ today.weather +'.png" class="week-img" /><p>' +
							today.weather + '</p></div><div><span class="pull-left temp">' + sk.temp + '℃' +
							'</span><span class="pull-right"><span class="pull-right">' + today.week + '</span><br/><span class="pull-right">' + today.city + '</span></span></div></div>');
						$.each(futur, function(i) {
							$('#future').append('<div><p>' + futur[i].week + '</p>' + '<img src="blackImg/'+futur[i].weather+'.png" class="future-img gray" />' +
								'<p>' + futur[i].weather + '</p><p>' + futur[i].temperature + '</p></div>');
							if(i > 1) {
								return false;
							}
						})
					}
				});
			}

			function change() {
				$('.container').fadeToggle("slow");
				$('.city-manage').fadeToggle('slow');
			}

			function urlencode(str) {
				str = (str + '').toString();
				return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').
				replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');
			}

			function add() {
				localStorage.setItem('weather_city', $('#input').val());
				getWeather();
				change();
			}

			$('.city-hot>ul>li').on('click', function() {
				localStorage.setItem('weather_city', $(this).text());
				getWeather();
				change();
			});
		</script>

	</body>

</html>